import './style.scss' // 引入样式
import './vue' // 引入vue
import axios from 'axios' // 引入axios

// 配置基础请求路径
axios.defaults.baseURL = '/bw/api'

// 实例化Vue
const app = new Vue({
  el: '#app',
  data: {
    data: null, // 接口数据
    curIndex: -1, // 当前点击的下标
    urlType: 'url', // 播放的音频类型
    power: true, // 是否允许播放
    volume: 0, // 音频的音量
    pos: null, // 鼠标的位置
    flag: false, // 是否允许拖动
    left: 0, // 滑块的left
  },
  methods: {
    // 鼠标按下
    onMousedown (index) {
      // 如果不允许播放, 阻断向下
      if (!this.power) return
      // 改变当前点击的下标, 就会添加高亮类名
      this.curIndex = index
    },
    // 鼠标抬起
    onMouseup (e) {
      // 当前下标设为-1, 就会移除高亮类名
      this.curIndex = -1
    },
    // 键盘按下
    onKeydown (e) {
      this.onMousedown(this.data.findIndex(v => v.keyCode === e.keyCode))
    },
    // 键盘抬起
    onKeyup (e) {
      this.onMouseup()
    },
    // 点击progressBar 滑块跳到指定位置
    onClickToPos (e) {
      // 最大移动距离
      const max = e.target.offsetWidth
      // 设置left值, 调整slider的位置
      this.left = e.offsetX
      // e.target.firstElementChild.style.left = this.left + 'px'
      // 修改volume
      this.volume = e.offsetX / max
    },
    // 按住slder记录鼠标的位置
    onMousedownSlider (e) {
      // 允许拖动
      this.flag = true
      // console.log(this.flag)
      // 记录此时鼠标的位置信息
      this.pos = {
        oldLeft: this.left,
        x: e.pageX + e.target.offsetWidth / 2 - e.offsetX,
        max: e.target.parentNode.offsetWidth
      }
    }, 
    // 鼠标移动事件
    onMousemoveDocument (e) {
      // console.log(111)
      if (!this.flag) return
      // 界定移动范围
      // console.log(e.pageX)
      this.left = Math.max(0, Math.min(this.pos.max, e.pageX - this.pos.x + this.pos.oldLeft))
      // console.log(this.left)
      console.log(this.left, this.pos.max)
      this.volume = this.left / this.pos.max
    },
    // 鼠标抬起事件
    onMouseupDocument () {
      // 不允许拖动
      this.flag = false
    }
  },
  computed: {
    src () {
      if (this.curIndex !== -1) {
        return this.data[this.curIndex][this.urlType]
      }
    }
  },
  watch: {
    volume: {
      handler (newVal) {
        // console.log(this.$refs.audio)
        this.$refs.audio.volume = newVal
      }
    }
  },
  // 创建完成之后
  async created () {
    // 调用axios 获取接口数据
    const res = await axios.get('/music')
    // console.log(res)
    this.data = res.data.data
    // console.log(this.data)
  },
  // 模板挂载完成之后
  mounted () {
    // console.log(111)
    // 给document绑定事件
    document.addEventListener('keydown', this.onKeydown)
    document.addEventListener('keyup', this.onKeyup)
    document.addEventListener('mousemove', this.onMousemoveDocument)
    document.addEventListener('mouseup', this.onMouseupDocument)
    // console.log(this.$refs.audio.muted)
    this.$refs.audio.volume = this.volume
  }
})
